<template>
  <!-- activity 活动相关界面 -->
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>活动设置</el-breadcrumb-item>
      <el-breadcrumb-item>所有活动</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <!-- 搜索与添加区域 -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入需要查询的活动名称" v-model="queryshop.query"
          clearable
          @clear="getActiveList">
          <el-button
          slot="append"
          icon="el-icon-search"
          @click="getActiveList"
          clearable></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible=true">添加活动</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- table表格 -->
    <el-card>
      <el-table
      :data="activeList"
      stripe
      style="width: 100%">
        <el-table-column label="活动类型" align="center">
          <template #default="{row}">
            {{row.activity_type ==='seckill'?'秒杀价':'折扣'}}
          </template>
        </el-table-column>
        <el-table-column label="活动价格"
          prop="activity_price" align="center">
          <template #default="{row}">
            {{row.activity_price}}
            {{row.activity_type ==='seckill'?'元':'%'}}
          </template>
        </el-table-column>
        <el-table-column label="开始时间"
          prop="start_time" align="center">
          <template #default="{row}">
            {{row.start_time.substr(0,10)}}
            {{row.start_time.substr(11,8)}}
          </template>
        </el-table-column>
        <el-table-column label="结束时间"
          prop="end_time" align="center">
          <template #default="{row}">
            {{row.end_time.substr(0,10)}}
            {{row.end_time.substr(11,8)}}
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加活动的对话框 -->
    <el-dialog
    title="添加活动"
    :visible.sync="addDialogVisible"
    width="50%"
    @close="addDialogClosed">
      <!-- 内容主体区域 -->
      <el-form :model="busiInfo" :rules="addFormRules" ref="addFormRef" label-width="80px">
        <el-form-item label="活动类型" prop="activity_type">
          <el-input v-model="busiInfo.activity_type" disabled></el-input>
        </el-form-item>
        <el-form-item label="活动价格" prop="activity_price">
          <el-input v-model.number="busiInfo.activity_price" type="number"></el-input>
        </el-form-item>
        <el-form-item label="活动类型">
          <el-radio-group v-model="busiInfo.activity_type" size="medium">
            <el-radio border label="折扣"></el-radio>
            <el-radio border label="秒杀"></el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="times">
        <span>开始时间 : </span>
        <el-time-picker
          v-model="busiInfo.start_time"
          :picker-options="{
            selectableRange: '18:30:00 - 20:30:00'
          }"
          placeholder="任意时间点">
        </el-time-picker></div>
        <div class="times">
        <span>结束时间 : </span>
        <el-time-picker
          arrow-control
          v-model="busiInfo.end_time"
          :picker-options="{
            selectableRange: '18:30:00 - 20:30:00'
          }"
          placeholder="任意时间点">
        </el-time-picker></div>
      </el-form>
      <!-- 底部按钮区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addShop">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'activity',
  data () {
    return {
      // 查询参数对象
      queryshop: {
        query: '',
        pageNum: 1,
        pageSize: 2
      },
      // 活动列表
      activeList: [],
      // 添加对话框显隐
      addDialogVisible: false,
      // 添加活动信息
      busiInfo: {
        activity_type: '请选择',
        activity_price: 222,
        start_time: new Date(2016, 9, 10, 18, 40),
        end_time: new Date(2016, 9, 10, 18, 40),
        goods_id: 2
      },
      //   添加活动的验证规则对象
      addFormRules: {
        activity_price: [
          { required: true, message: '请输入活动价格号', trigger: 'blur' },
          { type: 'number', message: '长度在 1 到 10 个字符之间' }
        ]
      }
    }
  },
  created () {
    this.getActiveList()
  },
  mounted () {

  },
  methods: {
    // 获取活动列表
    async getActiveList () {
      const { data: res } = await this.$http.get('goods-activity', { params: this.queryshop })
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取活动列表失败')
      this.activeList = res.data
    },
    // 监听添加商铺对话框的关闭事件
    addDialogClosed () {
      this.$refs.addFormRef.resetFields()
    },
    // 点击按钮,添加新商铺
    addShop () {
      this.$refs.addFormRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        console.log(this.busiInfo.activity_type)
        // 可以发起添加商铺的网络请求
        const { data: res } = await this.$http.post('goods-activity', {
          activity_type: this.busiInfo.activity_type === '秒杀' ? 'seckill' : 'discount',
          activity_price: this.busiInfo.activity_price,
          start_time: this.busiInfo.start_time,
          end_time: this.busiInfo.start_time,
          goods_id: this.busiInfo.goods_id
        })
        console.log(res)
        if (res.meta.status !== 200) return this.$message.error('添加商铺失败')

        this.$message.success('添加商铺成功')
        // 隐藏添加商铺的对话框
        this.addDialogVisible = false
        // 重新获取商铺列表数据
        this.getActiveList()
      })
    }
  }
}
</script>

<style scoped lang="less">
.times{
  display: inline-block;
  width: 40%;
  margin-right: 3%;
}
</style>
